<template>
	<view class="">
		<view class="main-wrap" :class="{show:loaded}">
			<view class="good-info">
				<view class="address-con">
					<view class="user-info">
						<view class="user-adr clamp2">{{dataInfo.addressDetail}}</view>
						<view class="" style="padding-top: 20upx;">
							<text class="user-name">{{dataInfo.addressName}}</text>
							<text class="user-name">{{dataInfo.addressPhone}}</text>
						</view>
					</view>
					<image src="/static/img/line.png" class="line"></image>
				</view>
				<view class="order-warp">
					<view class="order-info" style="font-size: 26upx;font-weight: bold;color: #2781A7;">洗护状态</view>
					<view class="" style="padding: 20upx;">
						<view class="order-info-con status column center">
							<view class="status-con">
								
								<view class="" v-for="(item, index) in 6" :key="index">
										<!-- <view class="status-i column center" :class="`status-i${index}`"><u-icon name="checkbox-mark" size="24"></u-icon></view> -->
									<view class="status-i column center status-i0" v-if="index == 0"><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<view class="status-i column center status-i1" v-else-if="index == 1"><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<view class="status-i column center status-i2" v-else-if="index == 2"><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<view class="status-i column center status-i3" v-else-if="index == 3"><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<view class="status-i column center status-i4" v-else-if="index == 4"><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<view class="status-i column center status-i5" v-else><u-icon name="checkbox-mark" size="24"></u-icon></view>
									<!-- <view class="status-i-info" :class="`status-in${index}`" v-if="index == 0">已下单</view> -->
									<view class="status-i-info status-in0" v-if="index == 0">已下单</view>
									<view class="status-i-info status-in1" v-else-if="index == 1">团长已收衣</view>
									<view class="status-i-info status-in2" v-else-if="index == 2">送往洗衣中心</view>
									<view class="status-i-info status-in3" v-else-if="index == 3">清洗中</view>
									<view class="status-i-info status-in4" v-else-if="index == 4">送回中</view>
									<view class="status-i-info status-in5" v-else>团长已签收</view>
								</view>
								<view class="status-ir column center status-ir0"><u-icon name="arrow-right" color="#ffffff" size="24"></u-icon></view>
								<view class="status-ir column center status-ir1"><u-icon name="arrow-right" color="#ffffff" size="24"></u-icon></view>
								<view class="status-ir column center status-ir2"><u-icon name="arrow-down" color="#ffffff" size="24"></u-icon></view>
								<view class="status-ir column center status-ir3"><u-icon name="arrow-left" color="#ffffff" size="24"></u-icon></view>
								<view class="status-ir column center status-ir4"><u-icon name="arrow-left" color="#ffffff" size="24"></u-icon></view>
								<!-- <view class="status-ir column center" v-for="(v, k) in 5" :key="k" :class="`status-ir${k}`">
									<u-icon name="arrow-down" color="#ffffff" size="24" v-if="k == 2"></u-icon>
									<u-icon name="arrow-left" color="#ffffff" size="24" v-else-if="k > 2"></u-icon>
									<u-icon name="arrow-right" color="#ffffff" size="24" v-else></u-icon>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="order-warp">
					<view class="order-info" style="font-size: 26upx;font-weight: bold;color: #2781A7;">洗衣袋</view>
					<view class="order-info-con" v-for="(item, index) in dataInfo.goodsList" :key="index">
						<view class="order-info row between">
							<view class="cart-item-img"><image :src="item.icon" mode="aspectFill" class="img"></image></view>
							<view class="cart-item-right fill">
								<view class="row between">
									<view class="clamp cart-item-title" style="width: ;">{{item.name}}</view>
									<view class="item-btn" hover-class="hover-gray" @tap="userClickPic(item)">查看</view>
								</view>
								<view class="row" style="padding-top: 10upx;">
									<view>
										<text class="cart-item-num">洗涤:</text>
										<text class="cart-item-price">{{item.washCost}}</text>
									</view>
									<view style="margin-left:14upx;" v-if="item.isSupport==1">
										<text class="cart-item-num">保价:</text>
										<text class="cart-item-price">{{item.supportFee}}</text>
									</view>
									<view style="margin-left:14upx;" v-if="item.isPack==1">
										<text class="cart-item-num">包装:</text>
										<text class="cart-item-price">{{item.packFee}}</text>
									</view>
								</view>
								<view class="row between item-bottom" v-if="item.isSupport==1">
									<view class="row">
										<text class="cart-item-num" style="color:#000000;">衣物价值:</text>
										<input type="text" disabled v-model="item.value" placeholder="请填写衣服价值" class="item-input" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="order-info-con " style="padding: 20upx 0;">
					<view class="order-info" style="font-size: 26upx;font-weight: bold;color: #2781A7;">订单详情</view>
					<view class="row between order-info-cell">
						<text class="order-label">订单编号:</text>
						<text class="order-time">{{dataInfo.orderNum}}</text>
					</view>
					<view class="row between order-info-cell">
						<text class="order-label">取件时间:</text>
						<text class="order-time">{{dataInfo.pickUpTimeStart}}~{{dataInfo.pickUpTimeEnd}}</text>
					</view>
					<view class="row between order-info-cell">
						<text class="order-label">订单优惠:</text>
						<text class="order-time price" style="color: #FE9090;">{{dataInfo.couponPrice}}</text>
					</view>
					<view class="row between order-info-cell">
						<text class="order-label">实际支付:</text>
						<text class="order-time price" style="color: #FE2525;">{{dataInfo.sum}}</text>
					</view>
					<view class="row between order-info-cell" v-if="dataInfo.payType==0">
						<text class="order-label">支付方式:</text>
						<text class="order-time" style="color:#6AAE59">微信支付</text>
					</view>
					<view class="row between order-info-cell" v-if="dataInfo.payType==2">
						<text class="order-label">支付方式:</text>
						<text class="order-time" style="color:#6AAE59">余额支付</text>
					</view>
					<view class="row between order-info-cell">
						<text class="order-label">创建时间:</text>
						<text class="order-time">{{dataInfo.createDate}}</text>
					</view>
					<view class="row between order-info-cell" @tap="callphone(dataInfo.tzPhone)">
						<text class="order-label">团长信息:</text>
						<view class="row" style="justify-content: flex-end;" >
							<u-icon name="/static/img/dha.png" size="32"></u-icon>
							<text class="order-time" style="margin-left:14upx;">{{dataInfo.tzName}}</text>
						</view>
					</view>
					<view class="row between order-info-cell">
						<text class="order-label">备注:</text>
						<text class="order-time">{{dataInfo.remarks}}</text>
					</view>
				</view>
			</view>
			<!-- "status":"0待付款1已下单2团长已收衣3送往洗衣中心4清洗中5送回中6团长已签收7待评价8已完成" -->
			<view class="footer-btn b-t column center">
				<view class="row between btn-con" style="width:100%;">
					<view class="" style="width: 30%;"></view>
					<view class="row between">
						<view class="order-btn one" hover-class="hover-opacity" @tap.stop="cancelOrder" v-if="dataInfo.status==0">取消订单</view>
						<view class="order-btn two" hover-class="hover-opacity" @tap.stop="navTo(`/pages/order/payorder?id=${item.id}&money=${item.sum}`)" v-if="dataInfo.status==0">去付款</view>
					</view>
				</view>
			</view>
		</view>
		<mix-modal ref="mixModal" :text="modalText"  :title="modalTitle" @onConfirm="onModalConfirm"></mix-modal>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import orderMixins from '@/common/mixin/order.js';
export default {
	mixins: [orderMixins],
	data() {
		return {
			dataInfo:{}
		};
	},
	onLoad(options) {
		this.id=options.id;
		this.loadData();
	},
	methods: {
		userClickPic(item){
			const pic=item.receivePic;
			getApp().globalData.pic=pic;
			this.navTo(`/pages/order/photo`);
		},
	   async loadData(){
		   const res=await this.$request('order/detail',{id:this.id},{showLoading:true});
		   if(res.result==0){
			   this.dataInfo=res.data;
		   }else{
			   this.$util.msg(res.resultNote);
		   }
	   }	
	}
};
</script>

<style scoped lang="scss">
.status {
	height: 306upx;
	background: #93c2d6;
	border-radius: 10upx;
}
.status-con {
	width: 588upx;
	height: 170upx;
	border-top: 1px solid #b1e0f4;
	border-right: 1px solid #b1e0f4;
	border-bottom: 1px solid #b1e0f4;
	position: relative;
}
.status-i {
	width: 38upx;
	height: 38upx;
	background: #ffffff;
	border-radius: 50%;
	position: absolute;
}
.status-ir {
	width: 24upx;
	height: 24upx;
	position: absolute;
}
.status-i-info {
	position: absolute;
	// width: 160upx;
	text-align: center;
	color: #ffffff;
	font-size: 24upx;
}
.status-ir0 {
	left: 108upx;
	top: -12upx;
}
.status-ir1 {
	right: 188upx;
	top: -12upx;
}
.status-ir2 {
	right: -14upx;
	top: 73upx;
}
.status-ir3 {
	right: 188upx;
	bottom: -14upx;
}
.status-ir4 {
	left: 108upx;
	bottom: -14upx;
}
.status-i0 {
	left: -19upx;
	top: -19upx;
}
.status-i1 {
	left: 220upx;
	top: -19upx;
}
.status-i2 {
	right: 60upx;
	top: -19upx;
}
.status-i3 {
	right: 60upx;
	bottom: -19upx;
}
.status-i4 {
	left: 220upx;
	bottom: -19upx;
}
.status-i5 {
	left: -19upx;
	bottom: -19upx;
}
.status-in0 {
	left: -30upx;
	top: 24upx;
}
.status-in1 {
	left: 180upx;
	top: 24upx;
}
.status-in2 {
	right: 0;
	top: 24upx;
}
.status-in3 {
	right: 44upx;
	bottom: -56upx;
}
.status-in4 {
	left: 204upx;
	bottom: -56upx;
}
.status-in5 {
	left: -30upx;
	bottom: -56upx;
	// width: 120upx !important;
}
.footer-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 120upx;
	padding: 0 20upx;
	background: #ffffff;
	z-index: 99;
}
.good-info {
	background: #ffffff;
	border-radius: 20upx 20upx 0 0;
	padding-bottom: 130upx;
}
.address-con {
	padding: 40upx 20upx;
	position: relative;
}
.user-adr {
	font-size: 32upx;
	font-weight: bold;
	color: #000000;
}
.user-name {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.line {
	position: absolute;
	bottom: 0;
	left: 5upx;
	width: 740upx;
	height: 6upx;
}
.order-warp {
	border-top: 20upx solid rgba(240, 240, 240, 0.3);
}
.item-btn {
	width: 120upx;
	height: 52upx;
	border: 1px solid #c7c7c7;
	border-radius: 26upx;
	text-align: center;
	line-height: 52upx;
	font-size: 26upx;
	color: #666666;
}
.order-info-cell {
	padding: 14upx 20upx;
}
.order-info {
	padding: 20upx;
}
.cart-item-img {
	width: 164upx;
	height: 164upx;
	border-radius: 10upx;
	overflow: hidden;
}
.img {
	width: 164upx;
	height: 164upx;
}
.cart-item-right {
	padding-left: 20upx;
	height: 164upx;
	position: relative;
}
.cart-item-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
	line-height: 36upx;
	max-width: 360upx;
}
.cart-item-price {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fe2525;
	line-height: 36upx;
}
.cart-item-price::before {
	content: '￥';
	font-size: 20upx;
}
.price::before {
	content: '￥';
	font-size: 20upx;
}
.cart-item-num {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.item-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-right: 20upx;
}
.item-input {
	font-size: 24upx;
	color: #999999;
	padding-left: 20upx;
}
.order-r-title {
	line-height: 80upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.order-label {
	font-size: 28upx;
	color: #333333;
}
.order-time {
	font-size: 26upx;
	color: #666666;
	width: 80%;
	text-align: right;
}
.order-btn {
	padding: 10upx 36upx;
	text-align: center;
	border-radius: 36upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
}
.one {
	color: #666666;
	border: 1px solid #e7e7e7;
	margin-right: 40upx;
}
.two {
	color: #99130c;
	border: 1px solid #99130c;
}
</style>
